<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" style="padding: 35px">
    <el-tab-pane label="全部通知" name="全部通知"><All /></el-tab-pane>
    <el-tab-pane label="未读通知" name="未读通知"><UnRead /></el-tab-pane>
    <el-tab-pane label="已读通知" name="已读通知"><Read /></el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref } from 'vue'
import All from "@/pages/notice/all/all-notice/Index.vue";
import UnRead from "@/pages/notice/all/unread-notice/Index.vue";
import Read from "@/pages/notice/all/read-notice/Index.vue";
//引入$bus
import $bus from "@/bus/index.js";
const activeName = ref('全部通知')

const handleClick = (tab, event) => {
  activeName.value = tab;
  console.log(tab.props.name)
  if(tab.props.name === '全部通知'){
    $bus.emit("all", { all: '' });
  } else if(tab.props.name === '未读通知'){
    $bus.emit("unread", { unread: '' });
  }else if(tab.props.name === '已读通知'){
    $bus.emit("read", { read: '' });
  }
}
</script>

<style scoped>
</style>